<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="css/graph.css">
    <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qqZnk9ta0LpbYMtewsmW9Vf7bHoEeiFG"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/html2canvas.min.js"></script>
    <title>地图展示</title>
</head>
<body>
    <section class="main" style="z-index:0">
     <ul class="graph-container" id="divContent">
        <li>
            <span>2010</span>
            <div class="bar-wrapper" >
                <div class="bar-container" style="height:20em">
                    <div class="bar-background"></div>
                    <div class="bar-inner" style="height: 30%;bottom: 0;">25</div>
                    <div class="bar-foreground"></div>
                </div>
            </div>
        </li>
        <li>
            <ul class="graph-marker-container">
            </ul>
        </li>
    </ul>
    </section>
    <div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");    // 创建Map实例

    map.centerAndZoom(new BMap.Point(118.778074,32.057236), 8);
    map.setCurrentCity("南京市");
    map.disableDragging();//禁止拖动
    map.disableDoubleClickZoom();//禁止双击缩放

    getBoundaryWithMarker("江苏");
    getBoundaryWithOutMarker("宿迁","#fc0521","#fc0521");
    getBoundaryWithOutMarker("徐州","#b25dea","#b25dea");
    getBoundaryWithOutMarker("连云港","#f4f9fc","#f4f9fc");
    getBoundaryWithOutMarker("淮安","#3f8443","#3f8443");
    getBoundaryWithOutMarker("盐城","#e328ed","#e328ed");
    getBoundaryWithOutMarker("扬州","#07f4fc","#07f4fc");
    getBoundaryWithOutMarker("南京","#ff0008","#ff0008");
    getBoundaryWithOutMarker("镇江","#f4f9fc","#f4f9fc");
    getBoundaryWithOutMarker("常州","#1203b7","#1203b7");
    getBoundaryWithOutMarker("泰州","#91351b","#91351b");
    getBoundaryWithOutMarker("无锡","#f4f9fc","#f4f9fc");
    getBoundaryWithOutMarker("南通","#f2f2f2","#f2f2f2");
    getBoundaryWithOutMarker("苏州","#3f8443","#3f8443");

    function getBoundaryWithMarker(name) {
        var pointArray = [];
         /*画遮蔽层的相关方法
        *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。
        *      这样就做出了一个经过多次西北角的闭合多边形*/
        //定义中国东南西北端点，作为第一层
        var pNW = { lat: 59.0, lng: 73.0 }
        var pNE = { lat: 59.0, lng: 136.0 }
        var pSE = { lat: 3.0, lng: 136.0 }
        var pSW = { lat: 3.0, lng: 73.0 }
        //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点
        var pArray = [];
        pArray.push(pNW);
        pArray.push(pSW);
        pArray.push(pSE);
        pArray.push(pNE);
        pArray.push(pNW);
        var boundary = new BMap.Boundary();
        boundary.get(name, function(rs){
         //一个省可能有好几个闭合的多边形区域
        for (var i = 0; i < rs.boundaries.length; i++) {
            var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 4, strokeColor: "#FF0000", fillOpacity: 0.01, fillColor: " #FFFFFF" });
            //建立多边形覆盖物
            map.addOverlay(ply);
              //将点增加到视野范围内
            var path = ply.getPath();
            pointArray = pointArray.concat(path);
            //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
            pArray = pArray.concat(path);
            pArray.push(pArray[0]);
        }
        //限定显示区域，需要引用api库
        var boundply = new BMap.Polygon(pointArray);
        BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());
        map.setViewport(pointArray);    //调整视野

        //添加遮蔽层
        var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#ffffff", fillOpacity: 0.9 }); //建立多边形覆盖物
        map.addOverlay(plyall);
        });
    }

    function getBoundaryWithOutMarker(name,strokeColor,fillColor) {
        var boundary = new BMap.Boundary();
        // var src = makeImage();
        boundary.get(name, function(rs){
            //一个省可能有好几个闭合的多边形区域
            for (var i = 0; i < rs.boundaries.length; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 1, strokeColor: strokeColor, fillOpacity: 0.5, fillColor: fillColor });
                ply.addEventListener("click", click);
                ply.addEventListener("mouseover", mouseover);
                ply.addEventListener("mouseout", mouseout);
                ply.addEventListener("mousemove", mousemove);
                //建立多边形覆盖物
                map.addOverlay(ply);
            }
           //添加名称标签层
            var centerlabel = new BMap.Label(name, { offset: new BMap.Size(0, -20) });
            centerlabel.setPosition(ply.getBounds().getCenter());
            map.addOverlay(centerlabel);

            //添加企业柱形
            var myCompOverlay = new ComplexCustomOverlay(ply.getBounds().getCenter());
            myCompOverlay.show();
            map.addOverlay(myCompOverlay);//将标注添加到地图中
        });
    }

    /**
     * 各种鼠标事件绑定
     */
    function click(evt) {
        evt.target.setFillOpacity(0.9);
    }

    function mouseover(evt) {
        evt.target.setFillOpacity(0.9);
    }

    function mousemove(evt) {
         evt.target.setFillOpacity(0.9);
    }

    function mouseout(evt) {
         evt.target.setFillOpacity(0.5);
    }

   function ComplexCustomOverlay(point){
      this._point = point;

    }
    ComplexCustomOverlay.prototype = new BMap.Overlay();
    ComplexCustomOverlay.prototype.initialize = function(map){
      this._map = map;
      var div = this._div = document.createElement("div");
      div.style.position = "absolute";
      div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);//聚合功能?
      div.style.height = "45px";
      div.style.width="45px";

      var arrow = this._arrow = document.createElement("img");
      // arrow.src = "pic.jpg";
      html2canvas($('#divContent'),{
            onrendered: function(canvas) {
                // document.body.appendChild(canvas);
                // convertCanvasToImage(canvas);
                arrow.src = canvas.toDataURL("image/png");
                console.log(arrow.src);
            }
      })
      arrow.style.width = "45px";
      arrow.style.height = "45px";
      arrow.style.top = "22px";
      arrow.style.left = "10px";
      div.appendChild(arrow);


      map.getPanes().labelPane.appendChild(div);//getPanes(),返回值:MapPane,返回地图覆盖物容器列表  labelPane呢???

      return div;

    }

    ComplexCustomOverlay.prototype.draw = function(){
      var map = this._map;
      var pixel = map.pointToOverlayPixel(this._point);
      this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
      this._div.style.top  = pixel.y - 30 + "px";
    }


    // var myCompOverlay = new ComplexCustomOverlay(new BMap.Point(118.778074,32.057236));

    // map.addOverlay(myCompOverlay);//将标注添加到地图中
    $(function(){
        // $(".main").hide();
    });
</script>
